<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<form id="fillDataForm" action="createCard-confirm.htm" method="POST" enctype="multipart/form-data" onsubmit="return doValidate();" autocomplete="off" >
<s:include value="cardCreateBeanInclude.jsp" />
<table width="722" border="0" cellpadding="0" cellspacing="0" class="bg2">
	<tr>
		<td width="100%" valign="top">
			<table width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td class="font02">ขั้นตอนที่ 4 การจัดส่งสินค้า</td>
				</tr>
			</table>
			<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="font03">
				<tr>
					<td>1. กรุณาเลือกวิธีการจัดส่งที่ต้องการ (ยกเว้นค่าจัดส่ง ในกรณี รับสินค้าด้วยตนเอง)</td>
				</tr>
				<tr>
					<td>2. เลือกสถานที่จัดส่งสินค้า หากสถานที่จัดส่งสินค้าไม่ตรงกับนามบัตร ให้เลือก ใช้ที่อยู่ตามที่ระบ และกรอกข้อมูลที่อยู่ใหม่ด้้านล่าง</td>
				</tr>
				<tr>
					<td>3. คลิกปุ่ม ขั้นตอนต่อไป เพื่อดำเนินการต่อ</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
				</tr>
			</table>
			
			<!-- วิธีการจัดส่ง -->
			<table width="617" border="0" align="center" height="33" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td width="151" class="font04"><strong>วิธีการจัดส่งสินค้า</strong></td>
						<td width="13">&nbsp;</td>
						<td width="453">
						<%--
						<select name="cardCreateBean.order.deliveryMethod" id="oDeliveryMethod">
								<option value="1">ไปรษณีย์ลงทะเบียน</option>
								<option value="2">ไปรษณีย์ด่วนพิเศษ (EMS)</option>
								<option value="0">รับด้วยตนเอง</option>
						</select>
						 --%>
						<s:select list="#{'1':'ไปรษณีย์ลงทะเบียน', '2':'ไปรษณีย์ด่วนพิเศษ (EMS)', '0':'รับด้วยตนเอง'}" 
							name="cardCreateBean.order.deliveryMethod" id="oDeliveryMethod">
						</s:select>
						</td>
					</tr>
				</tbody>
			</table>

			<!-- สถานที่จัดส่ง -->
			<table width="619" border="0" align="center" height="33" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td width="152" class="font04"><strong>สถานที่จัดส่งสินค้า</strong></td>
						<td width="14">&nbsp;</td>
						<td width="453">
							<label for="deliveryMethod2"> 
								<span class="font05"> <input type="radio" name="addrRadio" id="addrRadio0" value="0"></span></label> 
								<span class="font05"> ใช้ที่อยู่ตามนามบัตร 
								<label for="deliveryMethod2">
								<input type="radio" name="addrRadio" id="addrRadio1" value="1"> ใช้ที่อยู่ตามที่ระบุ (กรุณากรอกข้อมูลด้านล่าง)
							</label>
						</span></td>
					</tr>
				</tbody>
			</table>
			<p>&nbsp;</p>
			</td>
	</tr>
	<tr>
		<td height="236"><table width="100%" height="236" border="0" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td valign="top"><table width="572" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
								<tbody>
									<tr>
										<td width="594" align="center" class="font05"><strong>เฉพาะกรณี
												ชื่อผู้รับหรือที่อยู่ไม่ตรงกับนามบัตร
												กรุณากรอกข้อมูลสถานที่จัดส่งสินค้าเพิ่มเติม</strong>
										</td>
									</tr>
								</tbody>
							</table>
							<table width="568" height="143" border="0" align="center" cellpadding="0" cellspacing="1">
								<tbody>
									<tr>
										<td width="127" class="font05">ชื่อ-นามสกุล *</td>
										<td width="438"><label for="textfield3"></label> 
											<input name="cardCreateBean.order.deliveryName" type="text" class="form_user_pass" id="txtDeliveryName">
										</td>
									</tr>
									<tr>
										<td valign="top" class="font05">ที่อยู่ในการจัดส่ง *</td>
										<td><label for="textfield4"></label>
											<s:textarea name="cardCreateBean.order.deliveryAddr" id="txtDeliveryAddr" cols="40" rows="5"></s:textarea>
										</td>
									</tr>
									<tr>
										<td class="font05">เบอร์ติดต่อ</td>
										<td><label for="textfield5"></label>
											<s:textfield name="cardCreateBean.order.deliveryMobile" id="txtDeliveryMobile" cssClass="form_user_pass"/>
										</td>
									</tr>
								</tbody>
							</table></td>
					</tr>
				</tbody>
			</table>
			
			<!-- Button -->
			<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
				<tbody>
					<tr>
						<td width="50%">&nbsp;</td>
						<td width="50%" align="right">
						<a href="createCard-preview.htm?stepBack=Y"
							onMouseOut="MM_swapImgRestore()"
							onMouseOver="MM_swapImage('Image2','','${ request.imageBase }/b_back2.gif',1)">
							<img src="${ request.imageBase }/b_back1.gif" title="ย้อนกลับเพื่อแก้ไข" width="126" height="33" id="Image2">
						</a>
						<input type="image" 
							onmouseout="MM_swapImgRestore()" 
							onmouseover="MM_swapImage('Image3','','${ request.imageBase }/b_next2.gif',1)"
							src="${ request.imageBase }/b_next1.gif" 
							value="ขั้นตอนต่อไป"
							width="126"
							height="33"
							id="doNextStep"/>
					</td>
					</tr>
				</tbody>
			</table>
			
		</td>
	</tr>


</table>
</form>
<script language="javascript">

$j(document).ready(function(){
	var fname = $j("#mmbFnameTh").val();
	var lname = $j("#mmbLnameTh").val();
	$j("#txtDeliveryName").val(fname+" "+lname);
	
	if($j('#txtDeliveryAddrUse').val()=='1'){
		$j('#addrRadio0')[0].checked=true;
		$j("#txtDeliveryAddr").attr('readonly','readonly');
	}else if($j('#txtDeliveryAddrUse').val()=='2'){
		$j('#addrRadio1')[0].checked=true;
	}else{
		if($j('#txtDeliveryAddrUse').val()!='') {
			disableAll();
		}else{
			$j("#txtDeliveryAddr")[0].disabled=true;
		}
	}
	
	
	$j('#addrRadio0').on('click',function(){
		$j("#txtDeliveryAddrUse").val(1);
		$j("#txtDeliveryAddr").removeAttr('disabled');
		
		if($j("#mtgId").val()==1 || $j("#mtgId").val()==2){
			var addr1 = $j("#mmbOfficeAddrTh")[0].value;
			var addr2 = $j("#mmbOfficeAddr2Th")[0].value;
			$j("#txtDeliveryAddr").val((addr1+" "+addr2).trim());
		}
		/*
		else if($j("#mtgId").val()==2)
		{
			$j("#txtDeliveryAddr").val($j("#branchAddrTh")[0].value);
		}
		*/
		
		$j("#txtDeliveryAddr").attr('readonly','readonly');
	});

	$j('#addrRadio1').on('click',function(){
		$j("#txtDeliveryAddrUse").val(2);
		$j("#txtDeliveryAddr").removeAttr('disabled');
		$j("#txtDeliveryAddr").removeAttr('readonly');
		$j("#txtDeliveryAddr").val('');
	});

	//Chance_2
	$j('#oDeliveryMethod').on('change',function(){
		if(this.value == '0'){
			disableAll();
		}else{
			$j('#addrRadio0')[0].disabled=false;
			$j('#addrRadio1')[0].disabled=false;
			var fname = $j("#mmbFnameTh").val();
			var lname = $j("#mmbLnameTh").val();
			$j("#txtDeliveryName")[0].disabled=false;
			$j("#txtDeliveryName")[0].style.background='#ffffff';
			$j("#txtDeliveryName").val(fname+" "+lname);
			$j("#txtDeliveryMobile")[0].disabled=false;
			$j("#txtDeliveryMobile")[0].style.background='#ffffff';
		}
	});
	
});

function disableAll(){
	$j('#addrRadio0')[0].checked=false;
	$j('#addrRadio0')[0].disabled=true;
	$j('#addrRadio1')[0].checked=false;
	$j('#addrRadio1')[0].disabled=true;
	$j('#txtDeliveryName').val('');
	$j("#txtDeliveryName")[0].disabled=true;
	$j("#txtDeliveryName")[0].style.background='#eaeaea';
	$j('#txtDeliveryMobile').val('');
	$j("#txtDeliveryMobile")[0].disabled=true;
	$j("#txtDeliveryMobile")[0].style.background='#eaeaea';
	$j("#txtDeliveryAddr").val('');
	$j("#txtDeliveryAddr")[0].disabled=true;
}

function doValidate()
{
	if($j('#oDeliveryMethod').val() == '0')
	{
		$j("#txtDeliveryAddrUse").val(0);
		
		return true;
	}
	/*Change 2
	if(!$j('#addrRadio0')[0].checked && !$j('#addrRadio1')[0].checked)
	{
		alert('กรุณาระบุ สถานที่จัดส่งสินค้า');
		return false;
	}
	*/

	if($j('#txtDeliveryName').val() == '')
	{
		alert('กรุณาระบุ ชื่อ-นามสกุล');	
		return false;
	}

	if($j('#txtDeliveryAddr').val() == '')
	{
		alert('กรุณาระบุ ที่อยู่ในการจัดส่ง');	
		return false;
	}
	
	return true;
}

</script>


